import React, { useEffect, useState } from 'react';
import { StyleSheet,View,TouchableOpacity,Image, Text } from 'react-native';

import icon_daily from '../../../assets/icon_daily.png';
import icon_search from '../../../assets/icon_search.png';

type TitleBarProps = {
    tab:number,
    ontabChanged:(tab:number)=>void,
}
export default (props:TitleBarProps)=>{
    const {tab,ontabChanged} = props;
    const [tabIndex,setTabIndex] = useState<number>(1);
    useEffect(()=>{
        setTabIndex(tab);
    },[tab]);
    const onTabPress = (newTabIndex:number)=>{
        setTabIndex(newTabIndex);
        ontabChanged(newTabIndex);
    };
    return <View style={styles.headerContainer} >
    <TouchableOpacity style={styles.dailyButton}>
      <Image style={styles.icon} source={icon_daily} />
    </TouchableOpacity>
    <TouchableOpacity style={styles.tabButton} onPress={()=>{
        onTabPress(0);
    }}>
      <Text style={tabIndex === 0 ? styles.tabTxtSelected : styles.tabTxt} >关注</Text>
      {tabIndex === 0 && <View style={styles.line} />}
      </TouchableOpacity>
    <TouchableOpacity style={styles.tabButton} onPress={()=>{
        onTabPress(1);
    }}>
      <Text style={tabIndex === 1 ? styles.tabTxtSelected : styles.tabTxt} >发现</Text>
      {tabIndex === 1 && <View style={styles.line} />}
      </TouchableOpacity>
    <TouchableOpacity style={styles.tabButton}onPress={()=>{
        onTabPress(2);
    }}>
      <Text style={tabIndex === 2 ? styles.tabTxtSelected : styles.tabTxt}>南京</Text>
      {tabIndex === 2 && <View style={styles.line} />}
      </TouchableOpacity>
    <TouchableOpacity style={styles.searchButton}>
      <Image style={styles.icon} source={icon_search} />
    </TouchableOpacity>
  </View>;
};

const styles = StyleSheet.create({
    headerContainer:{
        width:'100%',
        height:50,
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        paddingHorizontal:18,
    },
    dailyButton:{
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        paddingRight:18,
        marginRight:10,
    },
    icon:{
        width:28,
        height:28,
    },
    tabButton:{
        height:'100%',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    tabTxt:{
        fontSize:18,
        color:'gray',
    },
    tabTxtSelected:{
        fontSize:20,
    },
    line:{
        position:'absolute',
        bottom:5,
        width:30,
        height:1,
        borderColor:'red',
        borderRadius:1,
        backgroundColor: '#ff2442',
        borderWidth:1,
    },
    searchButton:{
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        paddingLeft:18,
        marginLeft:10,
    },
});
